<template>
  <div style="padding-bottom: 8px">
    <el-text class="mx-1" >说明：楼层编号用于楼层排序, 从小到大</el-text>
  </div>
  <el-card>

    <el-button type="primary" @click="showDialog" style="margin-bottom: 8px">添加楼层</el-button>
    <br>

    <el-table :data="floors" style="width: 100%" border>
      <el-table-column label="序号" prop="id" />
      <el-table-column label="楼层名称" prop="name" />
      <el-table-column label="楼层编号" prop="number" />
<!--      <el-table-column label="创建时间" prop="createTime" />-->
      <el-table-column width="170px" label="操作">
        <template #default="scope">
          <el-button size="small" @click="showRoleDialog(scope.row)">分配权限</el-button>
          <el-button size="small" type="danger" @click="deleteFloor(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加楼层对话框 -->
    <el-dialog v-model="dialogVisible" title="添加楼层">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="楼层名称">
          <el-input v-model="form.name" placeholder="请输入楼层名称" />
        </el-form-item>
        <el-form-item label="楼层编号">
          <el-input v-model="form.number" placeholder="请输入楼层编号" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
  </el-card>

  <RoleDialog v-model="roleDialog" :type="type" :resourceIndex="resourceIndex" @close="closeRoleResourceAdd"/>
</template>
<!--addResourcePermissionFun('FLOOR', scope.row.id)-->
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getFloors, createFloor, deleteFloor as deleteFloorApi } from "@/apps/admin/utils/floorApi.js";
import RoleDialog from "@/apps/admin/components/RoleDialog.vue";

const type = ref()
const resourceIndex = ref()
const roleDialog = ref(false)
function closeRoleResourceAdd(){
  roleDialog.value = false;
}
function showRoleDialog(q){
  console.log(q)
  type.value = "FLOOR"
  resourceIndex.value = q.id
  roleDialog.value = true;
}


// 状态管理
const dialogVisible = ref(false);
const form = ref({
  name: '',
  number: '',
});
const floors = ref([]);

// 打开添加楼层对话框
const showDialog = () => {
  form.value = { name: '', number: ''};  // 重置表单
  dialogVisible.value = true;  // 显示对话框
};

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
};

// 提交表单
const submitForm = async () => {
  const newFloor = { ...form.value }; // 创建楼层对象
  try {
    const body = await createFloor(newFloor);
    if (body["code"] === 200) {
      ElMessage.success("创建楼层成功");
      floors.value.push(body.data);  // 添加新楼层到列表
      closeDialog();  // 关闭对话框
    } else {
      ElMessage.error(body["msg"]);
    }
  } catch (error) {
    ElMessage.error(getErrorMessage(error));  // 统一错误提示
  }
};

// 删除楼层
const deleteFloor = async (floor) => {
  try {
    const body = await deleteFloorApi({ floorId: floor.id });
    if (body["code"] === 200) {
      floors.value = floors.value.filter(f => f.id !== floor.id);  // 移除楼层
      ElMessage.success("删除楼层成功");
    } else {
      ElMessage.error(body["msg"]);
    }
  } catch (error) {
    ElMessage.error(getErrorMessage(error));  // 统一错误提示
  }
};

// 获取楼层列表
const fetchFloors = async () => {
  try {
    const body = await getFloors();
    floors.value = body["data"];
  } catch (error) {
    ElMessage.error(getErrorMessage(error));  // 统一错误提示
  }
};

// 获取错误消息（统一处理）
const getErrorMessage = (error) => {
  return error.response?.data?.msg || error.message || '未知错误';
};

// 组件挂载后获取楼层数据
onMounted(() => {
  fetchFloors();  // 获取楼层数据
});


</script>
